<template>
  <div>
    <div>动态路由匹配</div>
    <div>{{ this.$route.params.userName }}</div>
    <div style="color: green">
      <div>this.$router 和 this.$route 不是一个东西</div>
      <div>
        <div>官房文档里是这样说明的：</div>
        <div>
          通过注入路由器，我们可以在任何组件内通过 this.$router
          访问路由器，也可以通过 this.$route 访问当前路由
        </div>
        <div>可以理解为：</div>
        <div>
          this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如
          history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。
        </div>
        <div>
          this.$route 表示当前路由对象，每一个路由都会有一个 route
          对象，是一个局部的对象，可以获取对应的 name, path, params, query
          等属性
        </div>
      </div>
    </div>

    <div>
      <img src="./this.route.png" />
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route);
  },
};
</script>

<style lang="scss" scoped></style>
